<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>富顺天牧</title>
    <!-- Bootstrap 3.3.7 -->
    <link rel="stylesheet" href="../adminlte/bower_components/bootstrap/dist/css/bootstrap.min.css">
    <link rel="stylesheet" href="../adminlte/bower_components/font-awesome/css/font-awesome.min.css">

    <link rel="stylesheet" href="../adminlte/bower_components/select2/dist/css/select2.min.css">
    <!-- Theme style -->
    <link rel="stylesheet" href="../adminlte/dist/css/AdminLTE.min.css">

    <script type="text/javascript" src="../3thjs/axios.min.js"></script>
    <script type="text/javascript" src="../3thjs/vue.js"></script>
    <script type="text/javascript" src="../3thjs/md5.js"></script>

    <!-- jQuery 3 -->
    <script src="../adminlte/bower_components/jquery/dist/jquery.min.js"></script>
    <!-- Bootstrap 3.3.7 -->
    <script src="../adminlte/bower_components/bootstrap/dist/js/bootstrap.min.js"></script>
    <script src="../adminlte/bower_components/select2/dist/js/select2.full.min.js"></script>

    <script src="../js/global.js"></script>
    <script src="../js/user.js"></script>

</head>
<body style="background-color: white; padding: 0; margin: 0;">
<div class="wrapper" style="background: transparent; margin: 0;" id="my-div">

    <div class="row" style="margin-left: 12pt; padding: 0; margin-top: 12pt;">
        <button type="button" class="btn btn-success" style="width: 100pt;" @click="showUpdate(-1)">添加
        </button>
    </div>

    <div style="margin: 12pt">
        <table id="table-main" class="table table-bordered table-hover">
            <thead>
            <tr style="padding: 0;">
                <th style="width: 40pt;">序号</th>
                <th>姓名</th>
                <th>手机号</th>
                <th>角色</th>
                <th width="60pt">操作</th>
            </tr>
            </thead>

            <tbody>

            <tr selectable="true" v-for="(b, i) in list">
                <td>{{i + 1}}</td>
                <td>{{b.name}}</td>
                <td>{{b.phone}}</td>
                <td>{{b.role}}</td>
                <td>
                    <div style="display: flex; flex-direction: row;">
                        <button type="button" class="btn btn-primary  btn-xs" style="margin-right: 4pt;"
                                @click="showUpdate(i)">修改
                        </button>
                        <button type="button" class="btn btn-danger  btn-xs"
                                @click="del(i)">删除
                        </button>
                    </div>
                </td>
            </tr>
            </tbody>
        </table>
    </div>

    <div class="modal fade" id="update-modal">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title">添加或修改</h4>
                </div>
                <div class="modal-body">
                    <input v-model="name" type="text" class="form-control" placeholder="姓名">
                    <p></p>
                    <input v-model="phone" type="text" class="form-control" placeholder="手机号">
                    <p></p>
                    <input v-model="pwd" type="text" class="form-control" placeholder="用户密码, 默认123456">
                    <p></p>
                    <select id="role" class="form-control select2" style="width: 100%;" data-placeholder="请设置用户权限">
                        <option></option>
                        <option v-for="r in roles" :value="r.id">{{r.name}}</option>
                    </select>

                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-warning" data-dismiss="modal">取消</button>
                    <button type="button" class="btn btn-primary" @click="save()">保存</button>
                </div>
            </div>
            <!-- /.modal-content -->
        </div>
        <!-- /.modal-dialog -->
    </div>


</div>
</body>


</html>
